<template>
	<section class="teach-wrap bgwhite lh25">
		<main>
			<mt-header fixed :title="data.title || '玩法规则'">
				<mt-button class="back" icon="back" slot="left" @click="hideTeach"></mt-button>
			</mt-header>
			<div class="mt40 ml10 mr10" v-html="data.content"></div>
			<div class="mt10" v-show="false">
				<dl class="lh35 fs14 pb50">
					<dt @click="show0=!show0" class="clearfix tl">
						<span class="fl ml10 gold">新手练习</span>
						<span class="fr mr10 fontc2 iconfont" :class="show0?'icon-shouqishang':'icon-zhankaixia'"></span>
					</dt>
					<dd v-show="show0" class="tl fontc0 pl10 pr10">如果您是新手，没有交易经验，建议您到模拟练习区进行模拟交易。</dd>

					<dt @click="show1=!show1" class="clearfix tl">
						<span class="fl ml10 gold">什么是买涨</span>
						<span class="fr mr10 fontc2 iconfont" :class="show1?'icon-shouqishang':'icon-zhankaixia'"></span>
					</dt>
					<dd v-show="show1" class="tl fontc0 pl10 pr10">当您买涨时，价格涨了你就赚钱，跌了亏钱。</dd>

					<dt @click="show2=!show2" class="clearfix tl">
						<span class="fl ml10 gold">什么是买跌</span>
						<span class="fr mr10 fontc2 iconfont" :class="show2?'icon-shouqishang':'icon-zhankaixia'"></span>
					</dt>
					<dd v-show="show2" class="tl fontc0 pl10 pr10">但您买跌时，价格跌了你就赚钱，涨了亏钱</dd>

					<dt @click="show3=!show3" class="clearfix tl">
						<span class="fl ml10 gold">什么是止盈</span>
						<span class="fr mr10 fontc2 iconfont" :class="show3?'icon-shouqishang':'icon-zhankaixia'"></span>
					</dt>
					<dd v-show="show3" class="tl fontc0 pl10 pr10">当单笔交易盈利金额触发（多于等于）指定的止盈金额时，该笔交易会被强制平仓。</dd>

					<dt @click="show4=!show4" class="clearfix tl">
						<span class="fl ml10 gold">什么是止损</span>
						<span class="fr mr10 fontc2 iconfont" :class="show4?'icon-shouqishang':'icon-zhankaixia'"></span>
					</dt>
					<dd v-show="show4" class="tl fontc0 pl10 pr10">
						<p>当单笔交易亏损金额触发（多于等于）指定的止损金额时，该笔交易会被强制平仓。</p>
						<p>由于市场的价格实时都在变动，不保证卖出后最终亏损金额一定小于等于止损金额，有可能会大于止损金额。</p>
						<p>当持仓时间到点后，持仓中的交易会被强制平仓，不保证成交价格，请务必在到期前自己选择卖出。</p>
					</dd>

					<dt @click="show5=!show5" class="clearfix tl">
						<span class="fl ml10 gold">什么是持仓时间</span>
						<span class="fr mr10 fontc2 iconfont" :class="show5?'icon-shouqishang':'icon-zhankaixia'"></span>
					</dt>
					<dd v-show="show5" class="tl fontc0 pl10 pr10">当持仓时间到点后，持仓中的交易会被强制平仓，不保证成交价格，请务必在到期前自己选择卖出</dd>

					<dt @click="show6=!show6" class="clearfix tl">
						<span class="fl ml10 gold">履约保证金</span>
						<span class="fr mr10 fontc2 iconfont" :class="show6?'icon-shouqishang':'icon-zhankaixia'"></span>
					</dt>
					<dd v-show="show6" class="tl fontc0 pl10 pr10">
						<p>履约保证金为操盘手委托平台冻结用于履行交易亏损赔付义务的保证金。操盘手以冻结的履约保证金作为承担交易亏损赔付，但交易亏损可能超出保证金金额，超出部分的亏损全部由操盘手承担，投资人不承担交易亏损。</p>
						<p>合作交易结束后，根据清结算结果，如交易盈利，操盘手冻结的履约保证金全额退还。如交易亏损，从冻结的履约保证金中，扣减操盘手所应承担的亏损赔付额，扣减后余额退还。如亏损超出保证金，则直接在操盘手账户余额中扣除。</p>
					</dd>

					<dt @click="show7=!show7" class="clearfix tl">
						<span class="fl ml10 gold">盈利如何分配</span>
						<span class="fr mr10 fontc2 iconfont" :class="show7?'icon-shouqishang':'icon-zhankaixia'"></span>
					</dt>
					<dd v-show="show7" class="tl fontc0 pl10 pr10">
						<p>盈利100%归操盘手所有，投资人不参与盈利分成。</p>
						<p>同上，如操盘手亏损超出保证金，投资人亦不承担超出部分亏损金额。</p>
					</dd>

					<dt @click="show8=!show8" class="clearfix tl">
						<span class="fl ml10 gold">实盘交易下单</span>
						<span class="fr mr10 fontc2 iconfont" :class="show8?'icon-shouqishang':'icon-zhankaixia'"></span>
					</dt>
					<dd v-show="show8" class="tl fontc0 pl10 pr10">操盘手的所有美原油交易，全部经由投资人的期货交易账户，下单到纽约商业交易所。</dd>
				</dl>
			</div>
		</main>
	</section>
</template>
<script>
import { MessageBox, Toast, Indicator } from 'mint-ui'
import { mapState, mapGetters } from 'vuex'
import { userArticleArticleDetail } from '@api/user.js'

export default {
	name: 'Teach',
	data() {
		return {
			data: {},

			show0: false,
			show1: false,
			show2: false,
			show3: false,
			show4: false,
			show5: false,
			show6: false,
			show7: false,
			show8: false
		}
	},
	props: {
		hideTeach: {
			type: Function,
			required: false,
			default: () => {}
		}
	},
	computed: {
		...mapState(['gold', 'curVariety'])
	},
	created() {
		this.getTeach()
	},
	methods: {
		getTeach() {
			userArticleArticleDetail({
				type: 2,
				varietyId: this.curVariety.varietyId
			}).then(res => {
				if (res.code == 200) {
					this.data = res.data
				} else {
					Toast('玩法 ' + res.msg)
				}
			})
		}
	},
	watch: {
		curVariety(newer, older) {
			this.getTeach()
		}
	}
}
</script>
<style scoped lang='scss'>
.mint-header .mint-button{
    background-color: #fff;
    margin-left: rem(10px);
}
.teach-wrap {
	min-height: 100%;
	width: 100%;
}
.back {
	width: rem(30px);
	text-align: left;
}
.gold {
	color: #db931f;
}
.iconfont {
	width: rem(20px);
	height: rem(20px);
}
dt {
	background: linear-gradient(0deg, #e9e9e9 0, #e2e2e2 30%, #fff 100%);
}
dt,
dd {
	border-top: 1px solid #e2e2e2;
}
dd p,
dd {
	text-indent: 2em;
}
</style>



